import React, { createContext, useContext } from 'react'

//父传子
// function Father() {
//     return (
//         <div>
//             <Son name={'苏泳斯'} age={18}></Son>
//         </div>
//     )
// }

// function Son({ name, age }) {
//     return (
//         <div>
//             {name}---{age}
//         </div>
//     )
// }

//子传父-在子组件中调用父组件的函数并传递实参
// function Father() {
//     const [a, setA] = useState('哈哈')
//     const getMsg = (msg) => {
//         setA(msg)
//     }
//     return (
//         <div>
//             传递的是--{a}
//             <Son onGetMsg={getMsg}></Son>
//         </div>
//     )
// }

// function Son({ onGetMsg }) {
//     const msg = '我是帅哥'
//     return (
//         <div>
//             <button onClick={() => onGetMsg(msg)}>点击</button>
//         </div>
//     )
// }

//父组件传dom过去
// function Father() {
//     return (
//         <div>
//             <Son>
//                 <span>你好傻叉</span>
//             </Son>
//         </div>
//     )
// }

// function Son(props) {
//     console.log(props);
//     return (
//         <div>
//             {props.children}
//         </div>
//     )
// }

//间接实现兄弟传参 子传父 父再传子 需要一个中介
// function Father() {
//     const [a, setA] = useState('哈哈')
//     const getMsg = (msg) => {
//         setA(msg)
//     }
//     return (
//         <div>
//             <Son onGetMsg={getMsg}></Son>
//             <Middle msg={a}></Middle>
//         </div>
//     )
// }

// function Middle({ msg }) {
//     return (
//         <div>
//             传递的是{msg}
//         </div>
//     )
// }

// function Son({ onGetMsg }) {
//     const msg = '我是帅哥'
//     return (
//         <div>
//             <button onClick={() => onGetMsg(msg)}>点击</button>
//         </div>
//     )
// }

const msgContent = createContext()

//跨层传递数据 Father->C组件
function Father() {
    const msg = '你好鸭'
    return (
        <div>
            <msgContent.Provider value={msg}>
                <B></B>
            </msgContent.Provider>

        </div>
    )
}

function B() {
    return (
        <div>
            <C></C>
        </div>
    )
}

function C() {
    const msg = useContext(msgContent)
    return (
        <div>
            {msg}
        </div>
    )
}
export default Father;